De getElementById methode

Gebruik

Gegeven een HTML element op de pagina waarvan het attribuut id ingesteld is op de waarde banner:

<div id="banner"> … </div>

JavaScript kan naar dat element verwijzen met behulp van de document.getElementById methode. Meestal wordt het geretourneerde object opgeslagen in een variabele die later in het programme gebruikt kan worden.

var banner= document.getElementById("banner");

De document.getElementById methode retourneert één en slechts één object en dat is logisch vermits de waarde van het id attribuut op één en dezelfde pagina uniek moet zijn.

Je kan de waarde van het object weergeven in de Developer Console als volgt:

console.log(banner); > <div id="banner"> … </div>

Nog een voorbeeld

Om de rijen van een HTML tabel te benaderen gebruiken we de volgende code:

var folder = document.getElementById("folder");
var rows = folder.rows;

We krijgen eerst een referentie naar de HTML tabel op de pagina met behulp van de getElementById methode van de DOM en slaan die referentie op in een variabele met de naam folder. Daarna gebruiken we die naam om een referentie te verkrijgen naar de verzameling van de tabelrijen. Die referentie plaatsen we in een variabele met de naam rows.

De DOM boom is zeer gedetailleerd. Zo kunnen we bijvoorbeeld heel specifiek de rij van het thead element benaderen, of de rijen van het tbody element:

var folder = document.getElementById("folder");
var headrow = folder.tHead.rows;
var bodyRows = folder.tBodies[0].rows

Een referentie verkrijgen naar de rij uit het thead object is gemakkelijk te begrijpen. Maar een table element kan meer dan één tbody element bevatten. De index die we hier gebruiken dient om de rijen van de eerste tbody uit de tbodies collectie. Collecties beginnen te tellen vanaf 0 en het eerste element is dus item 0 en kan benaderd worden met tBodies[].

We kunnen ook één specifieke rij benaderen. Om een referentie naar de eerste rij uit tbody te verkrijgen gebruiken we dezelfde methode als hierboven:

var folder = document.getElementById("folder");
var bodyRows = folder.tBodies[0].rows
var rows= bodyRows[0];

We volgen het zelfde principe om cellen in een tabel te benaderen. Elke rij bevat een celcollectie die alle cellen in een bepaalde rij bevatten. Om de eerste rij in een tabel te benaderen kunnen we het volgende doen:

var folder = document.getElementById("folder");
var cell = folder.rows[0].cells[0];

Hier hebben geen onderscheid gemaakt tussen het thead en het tbody element. Als er geen thead element in het table element zit wordt de eerste rij van tbody opgehaald. Anders verkrijgen we een referentie naar de rij van thead.

Veilig programmeren

In JavaScript kan je dit op verschillende manier doen. De meest beknopte manier is de volgende:

var row = document.getElementById("folder").tBodies[0].rows[0];

Je moet kiezen tussen efficiëntie en leesbaarheid. Maar de meest robuuste manier is:

var folder = document.getElementById("folder");
if (folder) {
   var tBody = folder.tBodies[0];
   if (tBody) {
      var rows = tBody.rows;
      if (rows) {
         var row = rows[0];
      }
   }
}

Dat lijkt overdreven. Maar wat als de tabel geen rijen bevat? Ik verkies de robuuste manier om onaangename runtime foutmeldingen te vermijden.